<template>
  <div class="user_data">

    <div class="public-table-component">
      <table class="t-table">
        <thead class="t-fix-title-height">
        <tr class="t-table-title">
          <th>{{ $t("views.user_data.title") }}</th>
          <th>{{ $t("views.user_data.content") }}</th>
          <th>{{ $t("views.public.operation") }}</th>
        </tr>
        </thead>
        <tbody>
        <!--id-->
        <tr class="t-table-tr">
          <td>ID</td>
          <td>{{ user_info.user_id }}</td>

          <td>
            <Button
                v-if="!user_info.is_super"
                size="small"
                type="primary"
                @click="superUser(1)"
            >设置超级管理员
            </Button>
            <Button
                v-if="user_info.is_super"

                size="small"
                type="error"
                @click="superUser(2)"
            >取消超级管理员
            </Button>


            <Button
                size="small"
                type="primary"
                @click="showItemFlag=true"
            >查看道具
            </Button>
          </td>
        </tr>
        <!--靓号-->
        <tr class="t-table-tr">
          <td>{{ $t("views.user_data.number") }}</td>
          <td>
            {{
              user_info.gama_number
            }}
          </td>
          <td>
            <Button
                size="small"
                type="primary"
                @click="modalFlag.changeno=true"
            >{{ $t("views.public.update") }}
            </Button>
          </td>
        </tr>
        <!--用户昵称-->
        <tr class="t-table-tr">
          <td>{{ $t("views.user_data.nickname") }}</td>
          <td>{{ user_info.nickname }}</td>
          <td>

          </td>
        </tr>
        <!--头像-->
        <tr class="t-table-tr">
          <td>{{ $t("views.user_data.headImg") }}</td>
          <td style="text-align: center">
            <img :src="user_info.avatar" alt=""/>

          </td>
          <td>

          </td>
        </tr>

        <!--钻石余额-->
        <tr class="t-table-tr">
          <td>{{ $t("views.user_data.diamond") }}</td>
          <td>{{ user_info.diamond_balance }}</td>
          <td></td>
        </tr>

        <!--金币余额-->
        <tr class="t-table-tr">
          <td>{{ $t("views.user_data.goldCoin") }}</td>
          <td>{{ user_info.gold_balance }}</td>
          <td>
            <Button
                size="small"
                type="primary"
                @click="modalFlag.sendGold=true"
            >赠送金币
            </Button>
          </td>
        </tr>

        <!-- ZJY  e 01 -->
        <!--封禁id-->
        <tr class="t-table-tr">
          <td>{{ $t("views.user_data.banId") }}</td>
          <td>
            <span v-show="user_info.block_time!==0"
                  style="color: red"> 封禁时间： {{ timestampToTime(user_info.block_time) }}</span>
          </td>
          <td>
            <div>
              <Button
                  v-show="user_info.block_time==0"
                  size="small"
                  type="warning"
                  @click=" aboutBanId.isreason = true; "
              >
                {{ $t("views.user_data.banId") }}
              </Button>
              <Button
                  v-show="user_info.block_time!==0"

                  size="small"
                  type="warning"
                  @click="closure_id_close"
              >{{ $t("views.user_data.liftTheBan") }}
              </Button>
            </div>
          </td>
        </tr>


        <!--封禁设备-->


        <!--  -->
        </tbody>
      </table>
    </div>


    <!-- 封禁id原因 -->
    <Modal
        v-model="aboutBanId.isreason"
        :cancel-text="$t('views.public.cancel')"
        :loading="aboutBanId.banIdLoading"
        :ok-text="$t('views.public.sure')"
        title="封禁用户"
        class="hide-load-btn hide-zindex-model"
        @on-ok="sureOther"
        @on-cancel="cancelClick"
    >
      <div class="box_all clear">
        <div class="box_title fl">封禁时长:</div>
        <div class="box_content fl">
          <i-select
              v-model="bockType"
              :placeholder="$t('views.public.pleaseChoose')"
          >
            <i-option
                v-for="(item, index) in timeList"
                :key="index"
                :value="item.value"
            >{{ item.text }}
            </i-option>
          </i-select>
        </div>
      </div>
    </Modal>

    <!--修改靓号-->
    <Modal
        v-model="modalFlag.changeno"
        :cancel-text="$t('views.public.cancel')"
        :ok-text="$t('views.public.sure')"
        :title="$t('views.user_data.updateNum')"
        @on-ok="changeuser_no"
    >
      <div class="box_all clear">
        <div class="box_title fl">*{{ $t("views.user_data.numberId") }}:</div>
        <div class="box_content fl">
          <Input v-model="changeForm_user_no"/>
        </div>
      </div>
    </Modal>


    <!--发放金币-->
    <Modal
        v-model="modalFlag.sendGold"
        :cancel-text="$t('views.public.cancel')"
        :ok-text="$t('views.public.sure')"
        title="赠送金币"
        @on-ok="sendGold"
    >
      <div class="box_all clear">
        <div class="box_title fl">*赠送金币数:</div>
        <div class="box_content fl">
          <Input v-model="goldNum"/>
        </div>
      </div>
    </Modal>


    <!-- 道具详情 -->
    <Modal
        v-model="showItemFlag"
        :ok-text="$t('views.public.sure')"
        :title="$t('views.user_data.itemDetail')"
        cancel-text=""
        class="item-list-modal"
        width="50%"
    >
      <Button  type="primary" @click="changeprops = true" style="margin-left: 4px">{{
          $t("views.user_data.add")
        }}
      </Button>
      <table class="t-table">
        <thead class="t-fix-title-height">
        <tr class="t-table-title">
          <th>类型</th>
          <th>道具名称</th>
          <th style="min-width: 88px">结束时间</th>
<!--          <th>{{ $t("views.public.operation") }}</th>-->
        </tr>
        </thead>
        <!-- 其他道具 -->
        <tr
            v-for="(item, index) in PropList || []"
            :key="index"
            class="t-table-tr"
        >
          <td>{{ setType(item.prop_type)}}</td>
          <td style="color: green">
              <div  style="display: flex;align-items: center;justify-content: center">
                <img style="width: auto;height: auto;max-height: 30px;max-width: 30px" :src="item.prop_url" alt="">
               &nbsp; {{ item.prop_name }}</div>
          </td>
          <td>{{ timestampToTime(item.expire_time) }}</td>
<!--          <td>-->
<!--            <Button type="error" size="small" @click="dele_shop(item.prop_id, 1)">{{-->
<!--                $t("views.public.delete")-->
<!--              }}-->
<!--            </Button>-->
<!--          </td>-->
        </tr>

      </table>
    </Modal>

    <!--新增设置道具-->
    <Modal
        v-model="changeprops"
        :cancel-text="$t('views.public.cancel')"
        :ok-text="$t('views.public.sure')"
        :title="$t('views.user_data.setTtem')"
        class="set-item-modal"
        @on-visible-change="resetShop"
        @on-ok="set_shop"
    >
      <div class="box_all clear">
        <div class="box_title fl">{{ $t("views.user_data.itemType") }}:</div>
        <div class="box_content fl">
          <i-select
              v-model="shop_type"
              :placeholder="$t('views.public.pleaseChoose')"
              @on-change="sureShoplist"
          >
            <i-option
                v-for="(item, index) in propType"
                :key="index"
                :value="item.value"
            >
              {{ item.text }}
            </i-option>
          </i-select>
        </div>
      </div>
      <div class="box_all clear">
        <div class="box_title fl">*{{ $t("views.user_data.items") }}:</div>
        <div class="box_content fl">
          <i-select
              id="gift_item"
              v-model="shop_id"
              :placeholder="$t('views.public.pleaseChoose')"
              @on-change="sureshop_time"
          >
            <i-option
                v-for="(item, index) in shopList"
                :key="index"
                :value="item.id"
                style="display: flex;align-items: center"
            >
              <img style="width: auto;height: auto;max-height: 30px;max-width: 30px" :src="item.prop_url" alt="">
              {{ item.prop_name }}
            </i-option>
          </i-select>
        </div>
      </div>
      <div class="box_all clear">
        <div class="box_title fl">有效天数:</div>
        <div class="box_content fl">
          <Input v-model="shop_time"/>
        </div>
      </div>



      <div slot="footer" class="amount-footer">

        <div class="btns">
          <Button type="text" @click="changeprops = false">{{
              $t("views.public.cancel")
            }}
          </Button>
          <Button type="primary" @click="set_shop">{{
              $t("views.public.sure")
            }}
          </Button>
        </div>
      </div>

      <!-- zjy e -->
    </Modal>
  </div>


</template>

<script>
import '@/css/components/public-table.scss';

import until from "@/js/until.js";
import {mapGetters} from "vuex";

export default {
  name: "user_data",
  directives: {},
  components: {},
  filters: {
    freezeType(val, that) {
      //2-升级vip 3-冻结扣除4-过期扣除

      if (val.type === 1) {
        return that.$i18n.tc("views.user_data.freeze")
      }
      if (val.type === 2) {
        return '成为svip' + val.level
      }
      if (val.type === 3) {
        return '冻结扣除'
      }
      if (val.type === 4) {
        return '过期扣除'
      }
    },
  },
  data() {
    return {
      user_info: {},
      that: this,
      shop_time:0,
      shop_type:1,
      shop_id:null,
      shop_typeList: this.getShop_typeList(),
      typeNum: [],
      shopList: [],

      showItemFlag: false,
      changeprops: false,
      aboutBanId: {
        isreason: false,
      },
      modalFlag: {
        changeno: false,
        sendGold: false,

      },
      changeForm_user_no: '',
      userNoReason: "",
      timeList: this.getTimeList(),
      bockType: 1,
      goldNum: 0,
      PropList: [],
      propType: [{
        value: 1,
        text: '头饰'
      }]

    };
  },
  computed: {
    ...mapGetters(["getLocale"]),

  },
  created() {

    this.getUserData();
    this.myPropList();
    this.sureShoplist();
  },

  mounted() {


    this.$nextTick(() => {
      var clientHeight =
          document.documentElement.clientHeight || document.body.clientHeight; //页面总高度

      var tabtop = document.querySelector(".public-table-component");
      var mainFooter = document.querySelector("#main-footer");
      var height = clientHeight - tabtop.offsetTop;

      if (mainFooter) {
        height = clientHeight - tabtop.offsetTop - 75;
      }
      tabtop.style.height = height + "px";
    });
  },
  methods: {
    setType(type) {
      let text = '';
      this.propType.forEach((item) => {
        if (item.value == type) {
          text = item.text
        }
      })
      return text
    },
    //删除道具
    dele_shop() {

    },
    // 新增道具
    set_shop(scrollTopFlag){

      this.$http.sendProp({
        user_id: this.$route.query.code,
        prop_id:this.shop_id,
        expire_time:this.shop_time
      }, {
        method: this.set_shop,
        that: this,
        scrollTopFlag,
      }).then((res) => {
        this.$Message.info('操作成功')
        this.changeprops=false;
        this.myPropList();

      })
    },
    // 新增道具
    resetShop(){

    },
    // 查询道具
    sureShoplist(scrollTopFlag){
      this.$http.searchProp({
        prop_type:this.shop_type,
      }, {
        method: this.sureShoplist,
        that: this,
        scrollTopFlag,
      }).then((res) => {
        this.shopList = res.list;
      })
    },
    // 查询道具
    sureshop_time(){

    },
    getShop_typeList() {
      return [
        {id: 1, text: this.$i18n.tc("views.user_data.vehicle")},
        // {id: 2, text: this.$i18n.tc("views.user_data.medal")},
        // {id: 3, text: this.$i18n.tc("views.user_data.headdress")},
        // {id: 4, text: this.$i18n.tc("views.user_data.number")},
        // {id: 5, text: this.$i18n.tc("views.user_data.VIP")},
        // {id: 6, text: this.$i18n.tc("views.user_data.gift")},
        // {id: 7, text: this.$i18n.tc("views.user_data.coupon")},

      ];
    },
    closure_id_close() {
      this.$modalCon('确认解除封禁').then((status) => {
        if (status) {
          this.$http.blockUser({
            user_id: this.$route.query.code,
            block_type: 2
          }, {
            method: this.closure_id_close,
            that: this,
          }).then(res => {
            if (res.code === 200) {
              this.$Message.info('操作成功')
              this.getUserData()

            }
          })
        }
      })
    },
    getTimeList() {
      return [
        {
          text: '封禁1天',
          value: 1
        }, {
          text: '封禁30天',
          value: 30
        },

        {
          text: '封禁365天',
          value: 365
        }
      ];
    },

    getUserData(scrollTopFlag) {
      this.$http.userDetails({
        user_id: this.$route.query.code
      }, {
        method: this.getUserData,
        that: this,
        scrollTopFlag,
      }).then((res) => {
        this.user_info = res.userDetails
      })
    },
    // 个人道具详情
    myPropList(scrollTopFlag) {
      this.$http.myPropList({
        user_id: this.$route.query.code
      }, {
        method: this.myPropList,
        that: this,
        scrollTopFlag,
      }).then((res) => {
        console.log(res, "---")
        this.PropList = res.list;
      })
    },


    timestampToTime(data) {
      return until.timestampToTime(data)
    },
    sureOther() {
      this.$http.blockUser({
        user_id: this.$route.query.code,
        block_type: 1,
        block_time: this.bockType
      }, {
        method: this.closure_id_close,
        that: this,
      }).then(res => {
        if (res.code === 200) {
          this.$Message.info('操作成功')
          this.getUserData()

        }
      })
    },

    cancelClick() {

    },
    changeuser_no() {
      this.$http.operateNumber({
        user_id: this.$route.query.code,
        user_number: this.changeForm_user_no,
      }, {
        method: this.changeuser_no,
        that: this,
      }).then(res => {
        if (res.code === 200) {
          this.$Message.info('操作成功')
          this.getUserData()

        }
      })
    },
    sendGold() {
      this.$http.sendGolds({
        user_id: this.$route.query.code,
        golds: this.goldNum,
      }, {
        method: this.sendGold,
        that: this,
      }).then(res => {
        if (res.code === 200) {
          this.$Message.info('操作成功')
          this.goldNum = 0;
          this.getUserData()

        }
      })
    },
    superUser(type) {

      this.$modalCon('确认操作？').then((status) => {
        if (status) {
          this.$http.superUser({
            user_id: this.$route.query.code,
            operate_type: type,
          }, {
            method: this.superUser,
            that: this,
          }).then(res => {
            if (res.code === 200) {
              this.$Message.info('操作成功')
              this.getUserData()

            }
          })

        }
      })

    },
    visibleChangeNo() {

    },
  },
  watch: {

    user_info: function (newValue) {
      console.log(newValue)
      // this.user_no = newValue.user_original_no > 0 ? newValue.user_original_no : newValue.user_no;
      this.user_no = newValue.user_no;
      this.nickname = newValue.nickname;
    },

  },
};
</script>

<style lang="scss" scoped>
.select_img:hover {
  opacity: 0.8;
}

.ull {
  height: 300px;
  width: 100%;
  overflow: auto;
}

.mt {
  margin: 3px;
}

.select_img {
  border: 1px solid #e8e8e8;
  padding: 5px 10px;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 10px;
}

.item-list-modal .t-table td {
  white-space: initial;
}

#user-data-show-ip > .ivu-modal-mask,
#user-data-show-ip > .ivu-modal-wrap {
  z-index: 990 !important;
}

.item-list-modal > .ivu-modal-mask,
.item-list-modal > .ivu-modal-wrap {
  z-index: 990 !important;
}

.set-item-modal > .ivu-modal-mask,
.set-item-modal > .ivu-modal-wrap {
  z-index: 991 !important;
}

.item-list-modal > .t-table td,
.t-table th {
  white-space: normal;
}

.memo-list {
  li {
    list-style: none;
    text-align: left;
    border-bottom: 1px #929fac dotted;
    padding: 5px 0;
    margin: 5px 10px;
  }
}

.amount-footer {
  display: flex;
  align-items: flex-end;

  .amount-tip {
    flex-wrap: wrap;
    margin-right: 20px;
    text-align: left;

    div {
      margin: 5px 0;

      .text {
        display: inline-block;
        width: 160px;
        text-align: right;
      }
    }

    .consume {
      .number {
        color: red;
      }
    }

    .remaining {
    }
  }

  .btns {
    flex: 1;
    width: 100px;
  }
}

#gift_item {
  & > > > .ivu-select-item {
    max-width: 250px;
  }
}

.item-search-box {
  justify-content: flex-start;
}
</style>
